<script setup lang="ts">
import { House, Monitor, ChatSquare, Box, User } from '@element-plus/icons-vue'
import { defineOptions, onMounted, reactive, ref } from 'vue'
import router from '@/router/index'
import { menuStore } from '@/stores/menu'
import { userStore } from '@/stores/user'


defineOptions({
    name: 'MainContainer'
})

/**
 * 菜单
 */
const asideList = [
    {
        label: '首页',
        name: 'home',
        path: '/home',
        icon: House
    },
    {
        label: '个人中心',
        name: 'centerView',
        path: '/center/centerView',
        icon: Monitor
    },
]
const asideListWithChildren = reactive([
    {
        label: '新闻管理',
        name: 'newsManage',
        icon: ChatSquare,
        children: [
            {
                label: '新闻添加',
                name: 'newsCreate',
                path: '/news-manage/newsCreate'
            },
            {
                label: '新闻列表',
                name: 'newsList',
                path: '/news-manage/newsList'
            },
        ]
    },
    {
        label: '产品管理',
        name: 'productManage',
        icon: Box,
        children: [
            {
                label: '产品添加',
                name: 'productAdd',
                path: '/product-manage/productAdd'
            },
            {
                label: '产品列表',
                name: 'productList',
                path: '/product-manage/productList'
            },
        ]
    },
])
const selectMenu = (index: string) => {
    router.push({
        path: index
    })
}
const menu = menuStore()

let hasRefreshed = ref(localStorage.getItem('hasRefreshed') === 'true')

onMounted(() => {
    if (user.userinfo.role !== 1) {
        return
    }
    asideListWithChildren.push({
        label: '用户管理',
        name: 'userManage',
        icon: User,
        children: [
            {
                label: '用户添加',
                name: 'userAdd',
                path: '/user-manage/userAdd'
            },
            {
                label: '用户列表',
                name: 'userList',
                path: '/user-manage/userList'
            },
        ]
    })
})
/**
 * 顶栏
 */
const user = userStore()

const logout = () => {
    localStorage.removeItem('token')
    localStorage.removeItem('userStore')
    localStorage.removeItem('hasRefreshed')
    router.push({
        path: '/login'
    })
}
const toCenterView = () => {
    router.push({
        path: '/center/centerView'
    })
}

const welcomeText = ref(
    new Date().getHours() < 12 ? '上午好~' : '下午好~'
)
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside :width="menu.isCollapse ? menu.collapseWidth : menu.commonWidth">
                <el-menu :collapse="menu.isCollapse" active-text-color="#6a8fcc" background-color="#fff"
                    class="el-menu-vertical-demo" :default-active="router.currentRoute.value.path" text-color="#000"
                    @select="selectMenu" :collapse-transition="true" v-show="hasRefreshed">
                    <el-menu-item v-for="item in asideList" :key="item.name" :index="item.path">
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.label }}</span>
                    </el-menu-item>
                    <el-sub-menu v-for=" item in asideListWithChildren " :key="item.name" :index="item.name">
                        <template #title>
                            <el-icon>
                                <component :is="item.icon"></component>
                            </el-icon>
                            <span>{{ item.label }}</span>
                        </template>
                        <el-menu-item v-for="subItem in item.children" :key="subItem.name" :index="subItem.path">{{
                            subItem.label
                        }}</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="headerBar">
                        <el-icon class="collapseBtn" @click="menu.changeCollapse">
                            <Fold />
                        </el-icon>
                        <span>NewsCube 后台管理</span>
                        <span> {{ welcomeText + " " + user.userinfo.username }} </span>
                        <el-dropdown>

                            <el-icon class="el-dropdown-link">
                                <Setting />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="toCenterView">个人中心</el-dropdown-item>
                                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <div>
                            <el-page-header :icon="null" :content="(String)(router.currentRoute.value.name).toUpperCase()"
                                title="NewsCube" />
                        </div>
                    </div>

                </el-header>
                <el-main> <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style lang='less' scoped>
@blue: #6a8fcc;

.el-aside {
    height: 100vh;
    box-shadow: 2px 0 10px rgba(0, 0, 0, .5);
    transition: width .5s;

    .el-menu {
        height: 100%;
        border: none;
    }
}

.el-header {
    padding: 0;
    margin-bottom: 70px;

    .headerBar {
        position: relative;
        padding: 0 20px;
        height: 70px;
        line-height: 70px;
        border-bottom: 1px solid @blue;

        .collapseBtn {
            position: relative;
            top: 5px;
        }

        .el-icon {
            padding-right: 20px;
            font-size: 52px;
        }

        .el-dropdown {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translate(0, -50%);
            font-size: 28px;

            .el-dropdown-link {
                outline: none;
            }
        }

        span {
            &:nth-child(2) {
                position: absolute;
            }

            &:nth-child(3) {
                position: absolute;
                right: 4%;
            }
        }
    }
}

.el-main {
    padding: 15px 50px;
}
</style>